<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{ pageTitle }}
        <span class="text-subtitle1">{{$t('列表')}}</span>
      </div>
      <q-space></q-space>
      <search-bar-toggle-btn v-model="searchBarVisibility"></search-bar-toggle-btn>
    </div>
    <div v-show="searchBarVisibility" class="q-pa-sm shadow-2 q-mb-md">
      <div class="row q-col-gutter-sm">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
          <q-toggle v-model="fpsReq.isEnabled" :disable="listDataLoadingState"
            :toggle-indeterminate="true" class="q-ma-xs"
            dense :label="$t('是否有效')" @update:model-value="loadListData" />
        </div>
      </div>
    </div>
    <div class="shadow-2">
      <q-table @request="fpsAssist.onDataTableRequest" :rows="$d.tableData" v-model:pagination="paginationInfo"
        :columns="fpsInfo.columnsInfo" :hide-pagination="true" :loading="listDataLoadingState"
        :visible-columns="fpsInfo.visibleColumns" binary-state-sort color="primary" dense
        flat row-key="companyId" separator="cell" @row-dblclick="(evt,row)=>{fpsNav.gotoDetail(row.companyId)}">
        <template v-slot:top="props">
          <!--功能按钮-->
          <div class="q-gutter-sm">
            <q-btn v-if="fx.hasModifyRight('Comm.Company.Edit')" color="primary" icon="add" :label="$t('新建')" no-caps
              @click="fx.router.push({ name: '/comm/basic/company/create' })" />
          </div>
          <!--填充所有剩余空间-->
          <q-space />
          <q-btn :disable="listDataLoadingState" :loading="listDataLoadingState" class="q-mr-sm" dense icon="refresh"
            :title="$t('刷新')" no-caps unelevated @click="loadListData" />
          <table-col-options-cfg v-model:table-columns="fpsInfo.columnsInfo"
            v-model:visible-columns="fpsInfo.visibleColumns"
            @update-col-options-for-save="fpsAssist.saveColOptions">
          </table-col-options-cfg>
          <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
            :ripple="false" :title="props.inFullscreen ? $t('退出全屏') : $t('全屏显示')" class="q-ml-sm" dense flat
            @click="props.toggleFullscreen" />
        </template>
        <!--无数据提示-->
        <template v-slot:no-data>
          <span class="full-width text-center"> <q-icon name="error_outline" /> {{$t('无数据')}} </span>
        </template>
        <!--状态列插槽-->
        <template v-slot:body-cell-state="props">
          <q-td :props="props" auto-width>
            <q-badge :color="props.row.isEnabled?'positive':'grey-6'" :label="props.row.isEnabled ? $t('有效') : $t('无效')" />
          </q-td>
        </template>
        <!--操作列插槽-->
        <template v-slot:body-cell-operation="props">
          <q-td :props="props" auto-width>
            <q-btn :dense="true" class="btn-in-row q-mr-xs" color="primary" :label="$t('查看')" no-caps
              @click="evt => fpsNav.gotoDetail(props.row.companyId, evt)" />
            <q-btn v-if="fx.hasModifyRight('Comm.Company.Edit')" :dense="true" class="btn-in-row"
              color="primary" :label="$t('编辑')" no-caps @click="evt => fpsNav.gotoEdit(props.row.companyId, evt)" />
          </q-td>
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'companyListStd'
}
</script>
<script lang="ts" setup>
import {useFpsHelper} from '../../hooks/fpsHelper'
import {useTitleHelper} from '../../hooks/titleHelper'
import { onMounted, reactive, ref } from 'vue'
import {GetCompanyListReq, GetCompanyListResp, CompanyFull} from '../../defs/company'
import {ColumnInfo} from '../../defs/comm'
import { useI18n } from 'vue-i18n'
const {t} = useI18n()

const pageTitle = t('公司管理')
useTitleHelper(pageTitle)

// 分页参数
let paginationInfo = {
  page: 1,
  rowsPerPage: 0
}

// 查询参数
const fpsReq: GetCompanyListReq = reactive({
  isEnabled: null
})

// 列参数
const columnsDefine: ColumnInfo[] = [
  {
    label: t('操作'),
    name: 'operation',
    field: 'operation',
    align: 'left',
    defOrder: 1,
    defVisible: true
  },
  {
    label: t('公司ID'),
    name: 'companyId',
    field: 'companyId',
    align: 'left',
    defOrder: 2,
    defVisible: true
  },
  {
    label: t('公司简称'),
    name: 'abbrName',
    field: 'abbrName',
    align: 'left',
    defOrder: 3,
    defVisible: true
  },
  {
    label: t('中文全称'),
    name: 'fullNameC',
    field: 'fullNameC',
    align: 'left',
    defOrder: 4,
    defVisible: true
  },
  {
    label: t('英文全称'),
    name: 'fullNameE',
    field: 'fullNameE',
    align: 'left',
    defOrder: 6,
    defVisible: true
  },
  {
    label: t('状态'),
    name: 'state',
    field: 'state',
    align: 'left',
    defOrder: 7,
    defVisible: true
  }
]

const $d = reactive({
  tableData: [] as CompanyFull[]
})

// 是否处于数据列表加载的状态
const listDataLoadingState = ref(false)
//加载列表数据
const loadListData = function () {
  listDataLoadingState.value = true
  $f.axios.get<GetCompanyListResp>('/comm/company/get-company-list', {params: fpsReq})
    .then(result => {
      fpsAssist.handleGenericFpsResp(result.data)
      $d.tableData = result.data.companyList
      fpsAssist.saveFpsReq(fpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      listDataLoadingState.value = false
    })
}

//region FPS配置
const {
  fpsInfo,
  fpsAssist,
  fpsNav,
  searchBarVisibility
} = useFpsHelper('/comm/basic/company',
  '/comm/basic/company/detail',
  '/comm/basic/company/create',
  '/comm/basic/company/edit',
  fpsReq, columnsDefine,
  null,
  loadListData)
//endregion

onMounted(() => {
  loadListData()
})

const fx = $f
</script>
